<template>
  <layout :isShowDesc="false" id="layout" :appHeader="{ back: false }">
    <view class="container">
      <view class="tui-page-title">請登錄</view>
      <view class="tui-form">
        <view class="tui-view-input">
          <tui-list-cell
            :hover="false"
            :lineLeft="false"
            backgroundColor="#f3f3f3"
          >
            <view class="tui-cell-input">
              <tui-icon name="mobile" color="#6d7a87" :size="20"></tui-icon>
              <input
                :adjust-position="false"
                :value="mobile"
                placeholder="請輸入手機號碼"
                placeholder-class="tui-phcolor"
                maxlength="11"
                @input="inputAccount"
              />
              <view class="tui-icon-close" v-show="mobile" @tap="clearInput(1)">
                <tui-icon
                  name="close-fill"
                  :size="16"
                  color="#bfbfbf"
                ></tui-icon>
              </view>
            </view>
          </tui-list-cell>
          <tui-list-cell
            :hover="false"
            :lineLeft="false"
            backgroundColor="#f3f3f3"
          >
            <view class="tui-cell-input">
              <tui-icon name="shield" color="#6d7a87" :size="20"></tui-icon>
              <input
                :adjust-position="false"
                :value="code"
                placeholder="請輸入驗證碼"
                placeholder-class="tui-phcolor"
                type="text"
                maxlength="36"
                @input="inputCode"
              />
              <view class="tui-icon-close" v-show="code" @tap="clearInput(3)">
                <!-- <tui-icon name="close-fill" :size="16" color="#bfbfbf"></tui-icon> -->
              </view>
              <view
                @click="sendSmsAjax()"
                class="tui-btn-send"
                :class="{ 'tui-gray': isSend }"
                :hover-class="isSend ? '' : 'tui-opcity'"
                :hover-stay-time="150"
                >{{ btnSendText }}</view
              >
            </view>
          </tui-list-cell>
        </view>
        <view class="tui-btn-box">
          <tui-button
            :disabledGray="true"
            :loading="loading"
            :disabled="disabled"
            :shadow="true"
            shape="circle"
            @click="submit"
            >登录</tui-button
          >
        </view>
        <view class="tui-cell-text">
          <view @click="href()">忘记密码？</view>
          <view @click="href(2)">注册账号</view>
        </view>
      </view>
    </view>
  </layout>
</template>

<script>
import { mapMutations } from 'vuex';
import tuiListCell from '@/components/thorui/tui-list-cell/tui-list-cell';
import tuiIcon from '@/components/thorui/tui-icon/tui-icon';
import tuiButton from '@/components/thorui/tui-button/tui-button';
import sessionStorage from '@/utils/sessionStorage';
export default {
  computed: {
    disabled: function() {
      let bool = true;
      if (this.mobile && this.code) {
        bool = false;
      }
      return bool;
    },
  },
  components: {
    tuiListCell,
    tuiIcon,
    tuiButton,
  },
  data() {
    return {
      mobile: '',
      code: '',
      popupShow: false,
      codeSrc: '',
      isSend: false,
      btnSendText: '獲取驗證碼', //倒计时格式：(60秒)
      countDownTime: 60,
      loading: false,
    };
  },
  created() {
    // this.refreshCode();
  },
  methods: {
    ...mapMutations(['login', 'logout']),
    back() {
      uni.navigateBack();
    },
    inputAccount: function(e) {
      this.mobile = e.detail.value;
    },
    inputCode: function(e) {
      this.code = e.detail.value;
    },

    // 清空输入框内容
    clearInput(type) {
      switch (type) {
        case 1:
          this.account = '';
          break;
        case 2:
          this.password = '';
          break;
        case 3:
          this.code = '';
          break;
        default:
          break;
      }
    },
    href(type) {
      let url = '/pages/login/forgetPwd/forgetPwd';
      if (type == 2) {
        url = '/pages/login/reg/reg';
      }
      this.tui.href(url);
    },

    refreshCode() {
      uni.$API.UserAuth.generateCode().then((res) => {
        this.codeSrc = 'data:image/png;base64,' + res.data;
      });
    },
    submit() {
      // uni.$API.UserAuth.loginByUserName({
      //   id: "uho",
      //   password: '1231231',
      //   code: this.code,
      // }).then(res => {
      //   uni.$co.Fun.showToast('登錄成功');
      //   sessionStorage.set('TOKEN', res.data.token);
      //   uni.switchTab({ url: '/pages/index/dashboard/index' })
      // })
      if (!this.mobile) {
        uni.$co.Fun.showToast('請輸入手機號碼');
      }
      if (this.loading === true) {
        return;
      }
      this.loading = true;
      uni.$API.UserAuth.loginByMobile({
        mobile: this.mobile,
        code: this.code,
      })
        .then((res) => {
          if (res.status === 0) {
            uni.$co.Fun.showToast('登錄成功');
            sessionStorage.set('TOKEN', res.data.token);
            setTimeout(() => {
              uni.switchTab({ url: '/pages/index/dashboard/index' });
            }, 3000);
            this.loading = false;
          }
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    countdown() {
      const countDownTimer = setTimeout(() => {
        if (this.countDownTime > 0) {
          this.countDownTime = this.countDownTime - 1;
          this.btnSendText = `${this.countDownTime}s重新獲取`;
          this.countdown();
        } else {
          this.btnSendText = '獲取驗證碼';
          this.countDownTime = 60;
          this.isSend = false;
          clearTimeout(countDownTimer);
        }
      }, 1000);
    },
    sendSmsAjax() {
      if (this.isSend) {
        return;
      }
      if (!this.mobile) {
        uni.$co.Fun.showToast('請輸入手機號碼');
        return;
      }
      this.isSend = true;
      uni.$co.Fun.showLoading('請稍後....');
      uni.$API.UserAuth.sendSms({ mobile: this.mobile })
        .then((res) => {
          if (res.status === 0) {
            uni.$co.Fun.hideLoading();
            uni.$co.Fun.showToast('验证码已发送');
            this.countdown();
          }
        })
        .catch((error) => {
          uni.$co.Fun.hideLoading();
          this.isSend = false;
        });
    },
  },
};
</script>

<style lang="scss">
.container {
  background: #fff;
  padding: 92rpx 80rpx 0 80rpx;
  height: 100vh;
  .tui-page-title {
    font-size: 52rpx;
    font-weight: bold;
    color: #42475f;
    line-height: 74rpx;
  }

  .tui-form {
    margin-top: 92rpx;
    .tui-list-cell {
      display: flex;
      align-items: center;
      height: 108rpx;
      width: 100%;
      border-radius: 54rpx;
      margin-bottom: 30rpx;
      &::after {
        border: 0;
      }
    }
    .tui-cell-input {
      padding-bottom: 0 !important;
    }
    .tui-view-input {
      width: 100%;
      box-sizing: border-box;

      .tui-cell-input {
        width: 100%;
        display: flex;
        align-items: center;
        padding-bottom: $uni-spacing-col-base;

        input {
          flex: 1;
          padding-left: $uni-spacing-row-base;
        }

        .tui-icon-close {
          margin-left: auto;
        }
      }
    }

    .tui-cell-text {
      width: 100%;
      box-sizing: border-box;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 70rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #9ea2b4;
      line-height: 42rpx;
      .tui-color-primary {
        color: $uni-color-primary;
      }
    }

    .tui-btn-box {
      width: 100%;
      box-sizing: border-box;
      margin-top: 60rpx;
    }
    .tui-btn-send {
      height: 88rpx;
      width: 188rpx;
      line-height: 88rpx;
      text-align: center;
      padding-left: 24rpx;
      padding-right: 24rpx;
      font-size: 24rpx;
      background: #fff;
      font-weight: bold;
      color: #515cc3;
      border-radius: 54rpx;
    }
  }
  .icon {
    width: 150rpx;
    height: 150rpx;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    border-radius: 50%;
  }
}
</style>
